<template>
  <div>
    <!-- Dialog 模式 -->
    <div v-if="mode === 'dialog'" class="w-full h-630px flex items-center justify-center bg-#000000b3 bg-opacity-70">
      <div class="oauth-dialog-overlay hidden"></div>
      <div class="bg-white rounded-12px w-300px shadow-lg overflow-hidden">
        <div class="py-20px px-20px pb-10px text-center">
          <h3 class="m-0 text-16px font-500 text-gray-800">{{ _title }}</h3>
        </div>
        <div class="px-20px pb-20px text-center">
          <p class="m-0 text-14px text-gray-600">{{ _message }}</p>
        </div>
        <div class="flex">
          <button
            class="flex-1 py-10px border-none bg-transparent text-16px cursor-pointer transition-colors duration-200 text-red-500 font-500 hover:bg-gray-50 active:bg-gray-100"
            @click="onAgree"
          >
            确认
          </button>
        </div>
      </div>
    </div>

    <!-- Official 模式 -->
    <div v-else-if="mode === 'official'" class="p-5 h-630px bg-white relative">
      <div class="flex items-center">
        <img :src="_logo" alt="" class="rounded-full w-8 h-8" />
        <span class="mx-1">{{ name }}</span>
        <span>申请获得</span>
      </div>
      <h2 class="py-5 text-xl font-medium">以下权限</h2>
      <p class="flex items-center">
        <i class="el-icon-circle-check text-base mr-2" />
        {{ _message }}
      </p>
      <div class="absolute bottom-12 w-full left-0 px-5 flex flex-col items-center">
        <button class="mb-2 w-38 py-2 rounded text-white border-none bg-#07C160" @click="onAgree">同意</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import image from '@/assets/default/default.png'

defineOptions({
  name: 'DkWxOauthPage'
})

const props = defineProps({
  // 模式切换：'dialog' 或 'official'
  mode: {
    type: String,
    default: 'dialog',
    validator: (value) => ['dialog', 'official'].includes(value)
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 消息内容
  message: {
    type: String,
    default: ''
  },
  // 公众号名称（official模式使用）
  name: {
    type: String,
    default: '公众号名称'
  },
  // logo图片（official模式使用）
  logo: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['agree', 'cancel', 'close'])

// 计算属性
const _message = computed(() => {
  if (props.mode === 'dialog') {
    return props.message || '允许我们在必要的场景下,合理使用您的个人信息,并且充分保障您的合法权益'
  } else {
    return props.message || '获得你的昵称、头像'
  }
})

const _title = computed(() => {
  return props.title || '获取你的昵称，头像'
})

const _logo = computed(() => {
  return props.logo || image
})

// 方法
const close = (ac, done) => {
  emit('close', ac, done)
  if (done) {
    done(false)
  }
}

const onAgree = () => {
  emit('agree')
}

const onCancel = () => {
  emit('cancel')
}

// 暴露方法
defineExpose({
  close
})
</script>

<style scoped>
/* 保留一些复杂的样式，其他都用UnoCSS */
.shadow-lg {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
</style>
